{% load custom_filters %}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>交通态势可视化分析系统</title>
    <link rel="stylesheet" href="../../static/css/main.css ">
    <script type="text/javascript" src="../../static/js/jquery.min.js"></script>
</head>
<body>
<!--头部-->
<header id="header">
    <div class="header">
        <h1 class=""><a style="color: white">交通态势可视化分析系统</a></h1>
    </div>
</header>

<!--内容-->
<section id="data_content">
    <div class="data_content">
        <!--功能键-->
        <div class="fun_button1">
            <button class="button1" id="button1" >交通流量统计分析</button>
            <button class="button2" id="button2">道路运行健康分析</button>
            <button class="button3" id="button3">拥堵识别及预测分析</button>
        </div>
        <script type="text/javascript">
        // 当按钮被点击时设置选定按钮的标识到 URL 参数中
        function setButtonParam(buttonId) {
            var urlParams = new URLSearchParams(window.location.search);
            urlParams.set('selectedButton', buttonId);
            window.history.replaceState(null, null, '?' + urlParams.toString());
        }
        document.getElementById('button1').addEventListener('click',function (){
            //setButtonParam('button1');
            localStorage.setItem("selectedButton", 'button1');
            Hide1();
        });
        document.getElementById('button2').addEventListener('click',function (){
            //setButtonParam('button2');
            localStorage.setItem("selectedButton", 'button2');
            Hide2();
        });
        document.getElementById('button3').addEventListener('click',function (){
            //setButtonParam('button3');
            localStorage.setItem("selectedButton", 'button3');
            Hide3();
        });
        function Hide1() {
            {#console.log("a")#}
            let div1 = document.getElementById('mydiv1');
            let div2 = document.getElementById('mydiv2');
            let div3 = document.getElementById('mydiv3');
            let div4 = document.getElementById('mydiv4');
            let div5 = document.getElementById('mydiv5');
            let div6 = document.getElementById('mydiv6');
            let div7 = document.getElementById('mydiv7');
            div1.style.visibility = "visible";
            div2.style.visibility = "hidden";
            div3.style.visibility = "hidden";
            div4.style.visibility = "visible";
            div5.style.visibility = "hidden";
            div6.style.visibility = "visible";
            div7.style.visibility = "hidden";
        }
        function Hide2() {
            {#console.log("a")#}
            let div1 = document.getElementById('mydiv1');
            let div2 = document.getElementById('mydiv2');
            let div3 = document.getElementById('mydiv3');
            let div4 = document.getElementById('mydiv4');
            let div5 = document.getElementById('mydiv5');
            let div6 = document.getElementById('mydiv6');
            let div7 = document.getElementById('mydiv7');
            div1.style.visibility = "hidden";
            div2.style.visibility = "visible";
            div3.style.visibility = "hidden";
            div4.style.visibility = "visible";
            div5.style.visibility = "hidden";
            div6.style.visibility = "hidden";
            div7.style.visibility = "visible";
        }
        function Hide3() {
            {#console.log("a")#}
            let div1 = document.getElementById('mydiv1');
            let div2 = document.getElementById('mydiv2');
            let div3 = document.getElementById('mydiv3');
            let div4 = document.getElementById('mydiv4');
            let div5 = document.getElementById('mydiv5');
            let div6 = document.getElementById('mydiv6');
            let div7 = document.getElementById('mydiv7');
            div1.style.visibility = "hidden";
            div2.style.visibility = "hidden";
            div3.style.visibility = "visible";
            div4.style.visibility = "hidden";
            div5.style.visibility = "visible";
            div6.style.visibility = "visible";
            div7.style.visibility = "hidden";
        }
        </script>
{#        功能一：mydiv1,mydiv4,mydiv6#}
{#        功能二：mydiv2,mydiv4,mydiv7,#}
{#        功能三：mydiv3,mydiv5,mydiv6,#}
        <!--右边-->
        <!--功能一-->

        <div class="part1" id="mydiv1" style="visibility:visible">
            <div class="part1_top">
                <div id="chart_5" style="width: 100%;height: 100%;"></div>
                <script>$(function (){
                    echart_5();
                })
                </script>
            </div>
            <div class="part1_mid">
                <div id="chart_7" style="width: 100%;height:100%;"></div>
                <script>$(function (){
                    echart_7();
                })
                </script>
            </div>
            <div class="part1_bottom">
                <div id="chart_4" style="width: 100%;height: 100%;"></div>
                <script>$(function (){
                    var contextradar = {{ dataradar|safe }};
                    echart_4(contextradar);
                })
                </script>
            </div>
        </div>
        <!--左边顶部-->
        <div class="part3" id="mydiv4" style="visibility:visible">
            <form id="form1">
            <select class="changeitem1" name="tabs_st_1" id="tabs_st_1" >
                    <option value="0" > 全路段 </option>
                    {% for st in sts %}
                        var str = changeNum[{{ st }}];
                        <option value="{{ st }}" {% if request.GET.st|add:0 == st %}selected{% endif %}> 路段{{ st|arabic_to_number }}</option>
                    {% endfor %}
            </select>
            <select class="changeitem2" name="tabs_time_1" id="tabs_time_1" >
                <option value="0" > 00:00</option>
                <option value="7" > 07:00 </option>
                <option value="7.5" > 07:30 </option>
                <option value="8" > 08:00 </option>
                <option value="8.5" > 08:30 </option>
                <option value="9" > 09:00 </option>
                <option value="9.5" > 09:30 </option>
                <option value="10" > 10:00 </option>
                <option value="10.5" > 10:30 </option>
                <option value="11" > 11:00 </option>
                <option value="11.5" > 11:30 </option>
                <option value="12" > 12:00 </option>
                <option value="12.5" > 12:30 </option>
                <option value="13" > 13:00 </option>
                <option value="13.5" > 13:30 </option>
                <option value="14" > 14:00 </option>
                <option value="14.5" > 14:30 </option>
                <option value="15" > 15:00 </option>
                <option value="15.5" > 15:30 </option>
                <option value="16" > 16:00 </option>
            </select>

            </form>
            <script>
                <!--监听下拉框change事件,改变value后提交表单-->
                document.getElementById("tabs_st_1").addEventListener("change",function (){
                    var form1 = document.getElementById("form1");
                    form1.submit();
                });
                document.getElementById("tabs_time_1").addEventListener("change",function (){
                    var form1 = document.getElementById("form1");
                    form1.submit();
                });
            </script>
            <div id="chart_10" style="width: 100%;height: 98%;"></div>
            <script>$(function (){
                var data_heatmap = new Array();
                var contentheat = {{ dataheat|safe }};
                for(var i=0;i<contentheat.length;i++){
                    var jsonObject = JSON.parse(contentheat[i]);
                    var coordinatevalue = new Array();
                    coordinatevalue.push(jsonObject['x']-10);
                    coordinatevalue.push(jsonObject['y']+10);
                    coordinatevalue.push(jsonObject['num']);
                    data_heatmap.push({name:jsonObject['name'],value:coordinatevalue});
                }
                var contentposi = {{ dataposition|safe }};
                echart_10(data_heatmap,contentposi);
            })
            </script>
        </div>
        <!--左边底部-->
        <div class="part2" id="mydiv6" >
            <div id="chart_2" style="width:100%;height: 100%;"></div>
            <script>$(function (){
                var contenttimeaxis = {{ datatimeaxis|safe }};
                var datax = contenttimeaxis['datax'];
                var datay = contenttimeaxis['datay'];
                echart_2(datax,datay);
            })
            </script>
        </div>
        <!--功能二-->
        <div class="part4" id="mydiv2" style="visibility:hidden">
            <div class="part4_top">
                <div id="chart_14" style="width: 100%;height:100%;"></div>
                <script>$(function (){
                    var datatotal = {{datatotal|safe}};
                    var numlist = new Array();
                    var stop_numlist = new Array();
                    var dist_list = new Array();
                    for(var i=0;i<datatotal.length;i++){
                        numlist.push(datatotal[i][0]);
                        stop_numlist.push(datatotal[i][1]);
                        dist_list.push(datatotal[i][2]);
                    }
                    echart_14(numlist,stop_numlist,dist_list);
                })
                </script>
            </div>
            <div class="part4_bottom">
                <div id="chart_15" style="width: 100%;height:100%;"></div>
                <script>$(function (){echart_15();})</script>
            </div>
        </div>
        <div class="part7" id="mydiv7" style="visibility:hidden">
            <div id="chart_13" style="width:100%;height: 100%;"></div>
            <script>$(function (){echart_13();})</script>
        </div>

        <!--功能三-->
        <div class="part5" id="mydiv3" style="visibility:hidden">
            <div class="part5_top">
                <div id="chart_11" style="width: 100%;height: 100%;"></div>
                <script>$(function (){echart_11();})</script>
            </div>
            <div class="part5_mid">
                <div id="chart_16" style="width: 100%;height:100%;"></div>
                <script>$(function (){echart_16();})</script>
            </div>
            <div class="part5_bottom">
                <div id="chart_9" style="width: 100%;height: 100%;"></div>
                <script>$(function (){
                    var databar = {{ databar|safe }};
                    echart_9(databar);
                })
                </script>
            </div>
        </div>
        <!--左边顶部-->
        <div class="part6" id="mydiv5" style="visibility:hidden">
            <form id="form2">
            <select class="changeitem1" name="tabs_st_2" id="tabs_st_2" >
                    <option value="0" > 全路段 </option>
                    {% for st in sts %}
                        <option value="{{ st }}" {% if request.GET.st|add:0 == st %}selected{% endif %}> 路段{{ st|arabic_to_number }}</option>
                    {% endfor %}
            </select>
            <select class="changeitem2" name="tabs_time_2" id="tabs_time_2" >
                <option value="0" > 00:00 </option>
                <option value="7" > 07:00 </option>
                <option value="7.5" > 07:30 </option>
                <option value="8" > 08:00 </option>
                <option value="8.5" > 08:30 </option>
                <option value="9" > 09:00 </option>
                <option value="9.5" > 09:30 </option>
                <option value="10" > 10:00 </option>
                <option value="10.5" > 10:30 </option>
                <option value="11" > 11:00 </option>
                <option value="11.5" > 11:30 </option>
                <option value="12" > 12:00 </option>
                <option value="12.5" > 12:30 </option>
                <option value="13" > 13:00 </option>
                <option value="13.5" > 13:30 </option>
                <option value="14" > 14:00 </option>
                <option value="14.5" > 14:30 </option>
                <option value="15" > 15:00 </option>
                <option value="15.5" > 15:30 </option>
                <option value="16" > 16:00 </option>
            </select>

            </form>
            <script>
                <!--监听下拉框change事件,改变value后提交表单-->
                document.getElementById("tabs_st_2").addEventListener("change",function (){
                    var form2 = document.getElementById("form2");
                    form2.submit();
                });
                document.getElementById("tabs_time_2").addEventListener("change",function (){
                    var form2 = document.getElementById("form2");
                    form2.submit();
                });
                <!--监听页面加载完成事件,在在页面的DOMContentLoaded事件发生时执行，选择下拉框值后,保存下拉框值,刷新页面后显示所选值-->
               document.addEventListener("DOMContentLoaded", function() {
                    var urlParams = new URLSearchParams(window.location.search);
                    var selectedValue_st = urlParams.get("tabs_st_1");
                    var selectedValue_time = urlParams.get("tabs_time_1");
                    if (selectedValue_st&&selectedValue_time) {
                    document.getElementById("tabs_st_1").value = selectedValue_st;
                    document.getElementById("tabs_time_1").value = selectedValue_time;
                    }
                    var selectedValue_st = urlParams.get("tabs_st_2");
                    var selectedValue_time = urlParams.get("tabs_time_2");
                    if (selectedValue_st&&selectedValue_time) {
                      document.getElementById("tabs_st_2").value = selectedValue_st;
                      document.getElementById("tabs_time_2").value = selectedValue_time;
                    }
                    var selectedButton = localStorage.getItem("selectedButton");
                    if (selectedButton === 'button1') {
                        Hide1();
                    } else if (selectedButton === 'button2') {
                        // 执行按钮2的操作
                        Hide2();
                    } else if (selectedButton === 'button3') {
                        // 执行按钮3的操作
                        Hide3();
                    }
                });
            </script>
            <div id="chart_12" style="width: 100%;height: 98%;"></div>
            <script>$(function (){
                var congestionpoints = {{datacongestionpoints|safe}};
                echart_12(congestionpoints);
            })
            </script>
        </div>



    </div>
</section>

<script src="../../static/js/echarts.min.js"></script>
<script src="../../static/js/myechart.js"></script>
<script src="../../static/js/echarts.js"></script>

</body>
</html>